import React from 'react';
import { Flex, Badge, WhiteSpace, Grid } from 'antd-mobile';
import { routerRedux } from 'dva/router';
import { connect } from 'dva';
import _ from 'lodash';
import MyIcon from '../Base/MyIcon';
import styles from './HomeCarousel.less';
import config from "../../utils/config";
const FlexItem = Flex.Item;

const data = [
  {
    icon: <MyIcon type="world" />,
    text: '我的业绩',
    href: '/myPerformanceStat',
    img: require('../../assets/b2.png'),
  },
  {
    icon: <MyIcon type="world" />,
    text: '我的回访',
    href: '/myTasks',
    img: require('../../assets/b4.png'),
  },
  {
    icon: <MyIcon type="world" />,
    text: '我的会员',
    href: '/vips',
    img: require('../../assets/b3.png'),
  },
  {
    icon: <MyIcon type="world" />,
    text: '会员指标',
    href: '/vipStat',
    img: require('../../assets/b1.png'),
  },
  {
    icon: <MyIcon type="world" />,
    text: '精准营销',
    href: '/p',
    img: require('../../assets/b6.png'),
  },
  {
    icon: <MyIcon type="world" />,
    text: '销售管理',
    href: '/performanceStat',
    img: require('../../assets/b7.png'),
  },
  {
    icon: <MyIcon type="world" />,
    text: '新增会员',
    href: '/addVip',
    img: require('../../assets/b5.png'),
  },
  {
    icon: <MyIcon type="world" />,
    text: '礼券核销',
    href: '/couponUse',
    img: require('../../assets/coupon.png'),
  },
  {
    icon: <MyIcon type="world" />,
    text: '母婴知识',
    href: '/knowledgeBase',
    img: require('../../assets/b9.png'),
  },
  {
    icon: <MyIcon type="world" />,
    text: '连带销售',
    href: '/association',
    img: require('../../assets/b8.png'),
  },
  {
    icon: <MyIcon type="money" />,
    text: '导购提成',
    href: '/bonus',
    img: require('../../assets/b10.png'),
  },
  {
    text: '育儿顾问',
    href: '/imChatList',
    img: require('../../assets/im.png'),
  },
];
function padData(argdata) {
  const length = argdata.length;
  const size = 3 - (length % 3);
  const fix = _.map(_.fill(Array(size), 1), (v, i) => {
    return i;
  });

  return _.concat(argdata, fix);
}
function HomeGrid({ dispatch, roles, shopId, im = {} }) {
  let als = _.get(config.acl, `${_.last(roles)}`, []);
  let gridData = _.filter(data, (item) => {
    if (_.includes(als, item.href)) {
      return item;
    }
  });

  const imIndex = _.findIndex(gridData, (item) => {
    return item.href === '/imChatList';
  });
  if (imIndex > -1) {
    gridData[imIndex].dot = !!im.newMessage;
  }

  const buildDataItem = (dataItem) => {
    if (dataItem.dot) {
      return (
        <div className={`${styles.gridChild} ${styles.dotIcon}`} onClick={() => {
          dispatch(routerRedux.push({
            pathname: dataItem.href,
          }));
        }}>
          <Badge dot>
          <img src={dataItem.img} style={{ width: '0.7rem', height: '0.7rem' }} alt="icon" />
          <div style={{ color: 'black', fontSize: '0.28rem', marginTop: '0.1rem' }}>
            <span>{dataItem.text}</span>
          </div>
          </Badge>
        </div>
      );
    }
    return (
      <div className={styles.gridChild} onClick={() => {
        dispatch(routerRedux.push({
          pathname: dataItem.href,
        }));
      }}>
        <img src={dataItem.img} style={{ width: '0.7rem', height: '0.7rem' }} alt="icon" />
        <div style={{ color: 'black', fontSize: '0.28rem', marginTop: '0.1rem' }}>
          <span>{dataItem.text}</span>
        </div>
      </div>
    );
  };

  return (
    <div className={styles.gird}>
      <Grid
        data={gridData}
        columnNum={4}
        hasLine={false}
        renderItem={buildDataItem}
      />
    </div>
  );
}

export default connect((state) => {
  return { roles: state.auth.currentUser.roles, shopId: state.auth.currentUser.shopId, im: state.im };
})(HomeGrid);
